<template>
  <div class="jsBox">
    <div id="jsCode" class="h-20rem"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import loader from "@monaco-editor/loader";
// import '@/assets/js/prism.js'
// import '@/assets/css/prism.css'
import * as monaco from 'monaco-editor';


const js = ref(`
const add = () => {
  return 108 + 30
}
const all = add()
const pEl = document.createElement('p')
pEl.innerHTML = all
pEl.style.color = 'red'
pEl.style.fontSize = '30px'
document.body.appendChild(pEl)
console.log(all)
`)

const codeInit = async (selector: string): Promise<monaco.editor.IStandaloneCodeEditor | undefined> => {
  const el = document.querySelector(selector) as HTMLElement
  let editor
  if (el) {
    loader.config({
      monaco
    })
    const monacoIns = await loader.init()
    editor = monacoIns.editor.create(el, {
      value: js.value,
      language: "javascript",
      theme: 'vs-dark', // 官方自带三种主题vs, hc-black, or vs-dark
      overviewRulerBorder: false, // 滚动是否有边框
      automaticLayout: true, // 自动布局
      readOnly: false, // 是否只读
      minimap: { // 关闭代码缩略图
        enabled: false // 是否启用预览图
      },
      lineNumbers: 'on', // 控制行号的显隐
      scrollBeyondLastLine: false, // 禁用额外滚动区
      scrollbar: {
        verticalScrollbarSize: 4, // 垂直滚动条宽度，默认px
        horizontalScrollbarSize: 4 // 水平滚动条高度
      },
    });
    return editor
  }
}

onMounted(async () => {
  const editor = await codeInit("#jsCode")
  editor?.onDidChangeModelContent((e) => {
    js.value = editor?.getValue()
  })
})


defineExpose({js})
</script>

<style scoped lang="scss">
</style>

